<template>
  <div style="padding: 20px;">
    <ng-form-build ref="formBuild" :models="models" :config="config" :formTemplate="form" />

    <div style="text-align: center;">
      <el-button type="primary" size="mini" @click="dataFormSubmit()">提交</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form:{
        "list": [
          {
            "type": "input",
            "options": {
              "defaultValue": "",
              "type": "text",
              "prepend": "",
              "append": "",
              "placeholder": "请输入",
              "maxLength": 0,
              "clearable": false,
              "hidden": false,
              "disabled": false
            },
            "label": "名称",
            "labelWidth": -1,
            "width": "100%",
            "span": 24,
            "model": "name",
            "key": "input_16915843546960",
            "rules": [
              {
                "required": true,
                "message": "请填写名称",
                "trigger": [
                  "blur"
                ]
              }
            ]
          },
          {
            "type": "select",
            "options": {
              "defaultValue": "",
              "placeholder": "请输入",
              "dynamic": 0,
              "options": [
                {
                  "value": "1",
                  "label": "下拉框1"
                },
                {
                  "value": "2",
                  "label": "下拉框2"
                }
              ],
              "methodType": "get",
              "dynamicPostData": "",
              "remoteFunc": "",
              "dataPath": "",
              "remoteValue": "",
              "remoteLabel": "",
              "dictType": "",
              "multiple": false,
              "showSearch": false,
              "clearable": false,
              "hidden": false,
              "disabled": false,
              "selectCb": "",
              "clearCb": "",
              "linkage": false,
              "linkData": []
            },
            "label": "数据源",
            "labelWidth": -1,
            "width": "100%",
            "span": 24,
            "model": "dataSource",
            "key": "select_16915843546963",
            "rules": [
              {
                "required": true,
                "message": "请填写数据源",
                "trigger": [
                  "blur"
                ]
              }
            ]
          },
          {
            "type": "textarea",
            "options": {
              "defaultValue": "",
              "rows": 4,
              "placeholder": "请输入",
              "maxLength": 0,
              "clearable": false,
              "autosize": false,
              "hidden": false,
              "disabled": false
            },
            "label": "执行sql",
            "labelWidth": -1,
            "width": "100%",
            "span": 24,
            "model": "execSql",
            "key": "textarea_16915843546961",
            "rules": [
              {
                "required": true,
                "message": "请填写sql信息",
                "trigger": [
                  "blur"
                ]
              }
            ]
          },
          {
            "type": "radio",
            "options": {
              "defaultValue": "",
              "placeholder": "请输入",
              "dynamic": 0,
              "options": [
                {
                  "value": "all",
                  "label": "全量"
                },
                {
                  "value": "increment",
                  "label": "增量"
                }
              ],
              "methodType": "get",
              "dynamicPostData": "",
              "remoteFunc": "",
              "dataPath": "",
              "remoteValue": "",
              "remoteLabel": "",
              "dictType": "",
              "hidden": false,
              "disabled": false,
              "linkage": false,
              "linkData": []
            },
            "label": "同步方式",
            "labelWidth": -1,
            "width": "100%",
            "span": 24,
            "model": "syncType",
            "key": "radio_16915843546965",
            "rules": [
              {
                "required": true,
                "message": "请填写同步方式",
                "trigger": [
                  "blur"
                ]
              }
            ]
          }
        ],
        "config": {
          "labelPosition": "left",
          "labelWidth": 100,
          "size": "mini",
          "outputHidden": true,
          "hideRequiredMark": false,
          "syncLabelRequired": false,
          "customStyle": ""
        },

      },

      config: {
        httpConfig: (config)=>{
          config.headers['aaaa'] = 'bbbb'
          return config
        },
        dict: [
          {type: 'sex' , label: '男' , value: '1'},
          {type: 'sex' , label: '女' , value: '2'},
          {type: 'yes_or_no' , label: '是' , value: '1'},
          {type: 'yes_or_no' , label: '否' , value: '2'},
          {type: 'nation' , label: '汉族' , value: '1'},
          {type: 'nation' , label: '蒙古族' , value: '2'},
          {type: 'nation' , label: '藏族' , value: '3'},
          {type: 'nation' , label: '壮族' , value: '4'}
        ]

      },
      // 标记历史数据
      models: {name:"123","dataSource":"1","execSql":"123123","syncType":"all","dataSource_label":"下拉框1","syncType_label":"全量"}
    }
  },
  methods: {
    dataFormSubmit() {
      const models = this.$refs.formBuild.getData(true)

      console.log('表单提交:' , JSON.stringify(models))
    }
  }
}
</script>